import React, {Component} from 'react';
import './index.css'
import LoginIcon from "../../pages/login/logo.svg";
import { Menu } from 'antd';
import {Link,withRouter} from "react-router-dom";
import menuList  from "../../config/menuConfig";

const { SubMenu } = Menu;
// 左侧导航
class LeftNav extends Component {
    //根据menu的数据数组生成对应的标签数组
    //map()循环+递归调用
    getMenuNodes=(value)=>{
        return value.map(item=>{
            if(!item.children){
                return (
                    <Menu.Item key={item.key}>
                        <Link to={item.key}>
                            {/*<Icon type={item.icon}/>*/}
                            <span>{item.title}</span>
                        </Link>
                    </Menu.Item>
                )
            }else{
                // const cItem = item.children.find(cItem=>cItem.key=this.props.location.pathname)
                // if(!cItem) return
                // if(cItem){
                //     this.openKey=item.key
                // }

                return (
                    <SubMenu
                        key={item.key}
                        title={
                            <span>{item.title}</span>
                        }
                    >
                        {
                            this.getMenuNodes(item.children)
                        }
                    </SubMenu>
                )
            }

        })
    }

    /*
    在第一次render()之前执行一次
    为第一个render()准备数据（同步）
     */
    componentWillMount() {
        this.menodes = this.getMenuNodes(menuList)
    }

    render() {
        const path=this.props.location.pathname
        // const openKey = this.openKey

        return (
            <div className="leftNav">
                <div className="logo">
                    <img src={LoginIcon} alt="logo" style={{width:50,height:50}}/>
                    <span style={{fontSize:20}}>React后台管理</span>
                </div>
                <div>
                    <Menu
                        selectedKeys={[path]}
                        defaultOpenKeys={[path]}
                        defaultSelectedKeys={[path]}
                        mode="inline"
                        theme="dark"
                    >
                        {
                            this.menodes
                        }
                    </Menu>
                </div>
            </div>
        );
    }
}
/*
withRouter高阶组件：
包装非路由组件，返回一个新的组件
新的组件向非路由文件传递3个属性：history，location,match

 */
export default withRouter(LeftNav);